Thank you for purchasing our template.
Use Firebug or Chrome Developer Tools.
Do not start from scratch, use an existing page from the demo and modify it to learn how it works.
Getting an error message? Someone might have seen it too, try a google search for a quick fix.
Explore the live demo for pages ideas and sample code.
Upload "html" folder into your ftp server. This folder contains all files of the template.
- css (Template CSS) - fonts (Font Faces, Font Awesome, etc..) - img (All Images) - js (Template JS) - Video (Youtube video link with lightbox)
The template is based on Bootstrap 3 Framework - http://getbootstrap.com
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
<div class="row">
<div class="col-md-12">
Level 1 column
<div class="row">
<div class="col-md-6">Level 2</div>
<div class="col-md-6">Level 2</div>
</div>
</div>
</div>
If you need more information, please visit this site: http://getbootstrap.com/css/#grid
The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:
- css/bootstrap.min.css - ( Bootstrap Grid & Layout Styles ) - css/font-awesome.min.css - ( Font Awesome Icon Styles ) - css/style.css - ( Contains Theme styles ) - css/responsive.css - ( Responsive styles - This stylesheet contains responsive rules for adapting the template to any resolution, from desktop to small mobile. ) - revolution/css/settings.css - ( Revolution Slider) - revolution/css/layers.css - ( Revolution Slider) - css/cubeportfolio.min.css - css/animate.min.css - ( Contains Animation Effects ) - css/owl/owl.carousel.css - ( Contains slider Stylings ) - css/owl/owl.theme.css - ( Contains Owl Stylings ) - css/raineffect.css - ( Contains raineffect Stylings ) - css/prettyphoto.css - ( Contains prettyphoto Stylings ) - master-slider/style/masterslider.css - ( Contains master-slider Stylings ) - master-slider/skins/default/style.css - ( Contains master-slider Stylings ) - css/countdown.css - ( Contains general Stylings )
To link any .css files, save it in "css" folder and link in head like this
<link href="css/your-file.css" rel="stylesheet" type="text/css">
jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/
The initialization of the elements, libs and features is made by the file main.js, in the JS folder.
- js/jquery.min.js - ( Jquery Library ) - js/bootstrap.js - ( Contains Bootstrap Elements Scripts ) - js/bootstrap.min.js - ( Contains Bootstrap Elements Scripts ) -js/jquery-latest.min.js - ( Contains portfolio Scripts ) -js/jquery.cubeportfolio.min.js - ( Contains portfolio Scripts ) -main-portfolio.js - ( Contains portfolio Scripts ) - revolution/js/jquery.themepunch.tools.min.js, revolution/js/jquery.themepunch.revolution.min.js js/revolution-custom.js - ( Contains Revolution Slider Scripts ) - js/jquery.mixitup.min.js - ( Portfolio Filter Script ) -js/waypoints.js - ( Contains waypoints. Scripts ) -js/jquery.prettyphoto.js - ( Contains easypiechart Scripts ) -master-slider/js/masterslider.min.js - ( Contains Team Slide Scripts ) -js/SmoothScroll.js - ( Contains SmoothScroll Scripts ) -js/jquery.counterup.js - ( Contains Bootstrap Elements Scripts )) -js/waypoints.js - ( Contains Counterup Scripts ) - js/jqBootstrapValidation.js - ( Contains Contact Validation Scripts ) - js/contact_me.js - ( Contains Contact from ) - js/index.min.js - ( Contains Contact from ) - js/owl.carousel.js - ( OWL carousel slider Script ) -js/particles.js - ( Contains particles Script ) -js/app.js - ( Contains particles app Script ) - wow.min.js - ( Contains Animation Effect Scritps ) - js/main.js - ( Contains all theme Elements and Features Initialization & Customized Scripts )
To link any .js files, save it in "js" folder and link before </body> tag like this
<script href="js/your-file.js" type="text/javascript">
The template has two different layout modes, Fullwidth, Box
if you want to use the Boxed version, add the following class
<div class="container">
if you want to use the fullwidth version, add the following class
<div class="container-fluid">
You can also customize the background color or image.
To change the embedded font, please take a look in the head part of the website and you will find this tag:
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Raleway:300,900,100,600,400,500,800" rel="stylesheet" type="text/css">
To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.
Yoututbe Video lightbox use styles with html code
<div class="lead-controls">
<div class="intro-buttons-2"> <a href="https://www.youtube.com/watch?v=nrJtHemSPW4"> <div class="prettyphoto btn text-center">See how
it works</div>
</div>
<div class="video-about">
<div class="about-buttons-2"> <a href="https://www.youtube.com/watch?v=nrJtHemSPW4"> <div class="prettyphoto btn text-center"></div>
</div>
Font Awesome is a @font-face iconset that you can change size and color of the icons using CSS.
If you need more information, please visit this site: http://fontawesome.io/,
If you need more information, please visit this site: https://github.com/pprince/etlinefont-bower,
<i class="fa fa-edit"></i> <i class="fa fa-search"></i> <i class="fa fa-shopping-cart"></i> <i class="fa fa-check-square-o></i>
<ico class="icon-map"></ico> <ico class="icon-global"></ico> <ico class="icon-genius"></icoi> <ico class="icon-map-pin></ico>
This is one of the best Lightbox plugins we have seen so far.
More details on https://github.com/scaron/prettyphoto.git
<a class="work" href="img/works/1.jpg"><img class="img-responsive" src="img/works/1.jpg" alt=""> </a>
<a class="work" href="img/works/2.jpg"><img class="img-responsive" src="img/works/2.jpg" alt=""> </a>
<a class="work" href="img/works/3.jpg"><img class="img-responsive" src="img/works/3.jpg" alt=""> </a>
<a class="work" href="img/works/4.jpg"><img class="img-responsive" src="img/works/4.jpg" alt=""> </a>
<a class="work" href="img/works/5.jpg"><img class="img-responsive" src="img/works/5.jpg" alt=""> </a>
<a class="work" href="img/works/6.jpg"><img class="img-responsive" src="img/works/6.jpg" alt=""> </a>
<a class="work" href="img/works/7.jpg"><img class="img-responsive" src="img/works/7.jpg" alt=""> </a>
<a class="work" href="img/works/8.jpg"><img class="img-responsive" src="img/works/8.jpg" alt=""> </a>
This is one of the best slider plugins we have seen so far.
"Slider Revolution is a fully developed slide displaying system offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. On top of that, Slider Revolution is fully responsive and mobile optimized and can take on any dimensions."
More details on http://themes.themepunch.com/?theme=revolution_jq
Owl Carousel Slider is the slider you'll find in the content.
Owl Carousel Slider is a Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. You can find more documentaion here http://owlgraphic.com/owlcarousel/
The variations of the slider is defined by data-effect attribute, which extends the default plugin options.
<div class="owl-carousel custom-styles" data-effect="fade" data-autoplay="3000">
<div class="item">
...
</div>
</div>
data-effect: Animation Effect for Slides ( Values: backSlide, fade, fadeUp, goDown )
data-autoplay: Autoplay of Slides ( Values: 3000 or true or false )
Typed Text is the slider you'll find in the content.
Owl Carousel Slider is the slider you'll find in the content.
Owl Carousel Slider is a Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. You can find more documentaion here http://owlgraphic.com/owlcarousel/
The variations of the slider is defined by data-effect attribute, which extends the default plugin options.
You can add some Animations / Transitions to the elements which fires when an element scrolls into view, it's pretty simple to use and you can add it in any element.
Usage:
<div wow bounceInUp" data-wow-duration="1200ms" data-wow-delay="400ms>
...
</div>
Heads up: The Attribute data-appear-animation-delay is Optional and is set in Miliseconds.
The animation can be set to:
To remove animation from an element, just remove data-appear-animation and data-appear-animation-delay attributes.
The images included in preview are for demonstration purposes and should always be replaced with your own work.
Images: http://picjumbo.com/
Images: https://www.pexels.com/
Images: https://freepik.com/
Mockups Images: http://www.fusionplate.com
Google Fonts - http://www.google.com/webfonts
Icons Font-face - http://fontawesome.io/,
Icons - https://www.iconfinder.com,
PLUGINS USED:
jQuery - http://www.jquery.com/
Bootstrap 3 - http://getbootstrap.com/
prettyphoto Lightbox - https://github.com/scaron/prettyphoto.git/
Revolution Slider - http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
Cube Portfolio - http://codecanyon.net/item/cube-portfolio-responsive-jquery-grid-plugin/6372959?s_rank=2
CountDown - https://github.com/hilios/jQuery.countdown
Animate- http://daneden.github.io/animate.css/
Owl Carousel - http://owlgraphic.com/owlcarousel
Jquery RainEffect - https://github.com/codrops/RainEffect
Jquery particles - https://github.com/VincentGarreau/particles.js
Once again, thank you so much for purchasing this Template. As I said that It is beginning, I'if you have any questions,we would love to help you .!